transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend过渡监听事件：

过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例：

 <!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {width: 200px;height: 200px;background: rgb(185, 9, 9);}div:hover {transform: translateX(500px);transition: all 10s;}</style></head><body><div></div></body><script>var divs = document.querySelector('div');divs.addEventListener('transitionend', function(e) {console.log(e);});</script></html>

change事件监听类型为checked的input变化：
当input的checked属性值发生改变时触发事件函数。

classList属性操作类名：

classList属性是用来操作一个元素的类名的，element.classList返回的是一个类名的伪数组，其属性还有几个常用方法：
element.classList.add(‘类名’)添加一个类名；
element.classList.remove(‘类名’)移除某个类名；
element.classList.toggle(‘类名’)有则删，无则加；

框架/对象事件：

指Frame/Object事件，

元素的创建：

1.document.write(‘标签代码及内容’)，如果在页面加载完在创建的，页面之前的内容会被覆盖掉;
2.element.innerHTML=‘标签代码及内容’，这里还可以是innerText或textContent；3.document.createElement(‘标签名’)等方式创建，如下文创建节点；得到一个对象；
4.利用element.insertAdjacentHTML()把字符串格式元素添加到父级元素中，括号中可以传入两个参数，第一个参数表示位置，第二个参数表示要插入的元素，第一个参数有：beforebegin元素自身前面、afterbegin元素内部第一个子节点前、beforeend元素内部最后一个子节点之后、afterend元素自身的后面

操作元素内容：
改变元素的内容：element.innerText 和element.innerHTML及element.textContent可以改变元素的内容，innerText仅仅改变的是元素的文本内容,IE8支持，而innerHTML还可以改变标签：

 <body><div id="box">鼠标移入</div><script>var box = document.getElementById('box');box.onmouseenter = function() {box.innerText = '鼠标移除';alert(box.textContent);};box.onmouseleave = function() {box.innerHTML = '<h1>innerHTML</h1>';};</script></body>

兼容代码：

很多API在不同的浏览器存在兼容性问题，为了兼容更多的浏览器，通常会把可以实现相同功能的不同API通过条件语句都运用上，如果某浏览器不兼容某个API，那么就会返回undefined，因此可以通过判断是否是undefined来实现兼容代码：

 <body><div id="testdiv"></div><script>function getEleById(iD) {return document.getElementById(iD);};// 设置文本的兼容代码：function setText(elements, texts) {if (elements.innerText) {elements.innerText = texts;} else if (elements.innerHTML) {elements.innerHTML = tests;} else {elements.textContent = texts;};};setText(getEleById('testdiv'), 'hello');</script></body>

操作元素的样式属性：

操作元素的属性有两种方式：修改行内样式：element.style.属性 = ‘属性值’；修改类名改变样式：element.calssName = ‘类名’

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#box {width: 200px;height: 200px;background: pink;}.red {color: red;font-size: 30px;}</style></head><body><div id="box">hello</div><script>var box = document.getElementById('box');console.dir(box);box.onmouseenter = function() {this.style.backgroundColor = 'skyblue';};box.onmouseleave = function() {this.className = 'red';};</script></body></html

-Attribute自定义属性操作：

实际开发中会给标签添加很多自定义的属性，特别是html5和css3中，但是自定义属性的值是不能通过this.属性名拿到的，同样也是无法设置的，这里有特殊的方法：.getAttribute(‘属性名’)拿到属性值，.setAttribute(’属性名‘，属性值)设置属性,.removeAttribute(‘属性名’)移除属性，这两种方法都是在DOM上操作的;

 <body><div score='10'>明明</div><div score='20'>小花</div><div score='30'>阿杰</div><script>var divScore = document.getElementsByTagName('div');for (var i = 0; i < divScore.length; i++) {divScore[i].setAttribute('sx', i);divScore[i].onclick = function() {// alert(this.score); //undefinedthis.removeAttribute('sx'); //移除sx属性console.log(this.getAttribute('score')); //对应div的score值};};</script></body>

return false阻止跳转:

超链接href属性中有地址的话会跳转，有的时候仅仅是点击不需要跳转，此时可以使用return false来阻止跳转：

     <script>var aId = document.getElementById('aid');aId.onclick = function() {alert('renter false阻止超链接跳转');return false;};</script>

元素绑定相同事件：
给元素绑定事件的方式有三种：
1.element.on事件名=function(){}微软特有；
2.element.addEventListener(‘事件名’,function(){},布尔值目前写false);
3.element.attachEvent(‘on事件名’,function(){});

addEventListener和attachEvent可以给同一个元素绑定相同事件不同处理函数的多个事件，而element.on事件名=function(){}的方式只能绑定相同事件中一个：

 <script>element.addEventListener('click', function() {console.log('这是addEventListener事件的处理函数1');}, false);element.addEventListener('click', function() {console.log('这是addEventListener事件的处理函数2');}, false);element.attachEvent('onclick', function() {console.log('这是attachEvent事件的处理函数1');});element.attachEvent('onclick', function() {console.log('这是attachEvent事件的处理函数2');});</script>

它们在不同的浏览器存在兼容性，其兼容代码如下：

 <script>// element为事件源，type为事件名，fn为事件处理函数function elementAddevent(element, type, fn) {if (element.addEventListener) {element.addEventListener(type, fn, false);} else if (element.attachEvent) {element.attachEvent('on' + type, fn);} else {element['on' + type] = fn;};};</script>

元素解绑事件：

1.element.事件类型=null;可以把之前事件的指向重新设为null，null代表没有事件处理函数，则事件不处理。

2.element.removeEventListener(‘事件类型’,命名函数名,布尔值一般用false)；需要注意的是：第二个参数传入的是一个命名函数的名字，否则解绑事件不成功。

3.element.detachEvent(‘on事件类型’,命名函数名)；同样第二个参数任然使用命名函数的名字。

上面方法中依然各自有兼容问题，为了兼容更多浏览器，其兼容代码如下：

 <script>function removeEvent(element, type, fname) {if (element.removeEventListener) {element.removeEventListener(type, fname, false);} else if (element.detachEvent) {element.detachEvent('on' + type, fname);} else {element['on' + type] = null;};};</script>

事件冒泡：

事件冒泡指多个元素嵌套有层次关系，且元素都注册了相同事件，如果最里面的元素的事件被触发，那么外面元素的事件也会自动触发，但是里面的元素的事件不会被触发。

阻止事件冒泡：window.event.cancelBubble = ‘true’；给事件添加此代码后，事件冒泡到有此代码的元素(包括此代码的元素)，但是它也有兼容问题，另一种方法是在事件处理函数中传入一个参数，这个参数调用.stopPropagation()方法,window.event可以用这里的参数代替：

 <!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;}#box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);}#box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);} #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').onclick = function() {console.log(this.id)};getEs('box2').onclick = function(e) {console.log(this.id);window.event.cancelBubble = 'true';e.stopPropagation();};getEs('box3').onclick = function() {console.log(this.id)};</script></html>

事件三阶段(事件流)：

1.事件捕获阶段：从外面的元素到里面的元素，e.eventPhase的值为1表示的是捕获阶段；

2.事件目标阶段：事件被触发的事件元素，e.eventPhase的值为2表示目标阶段；

3.事件冒泡阶段：从里面的元素到外面的元素，e.eventPhase的值为3表示冒泡阶段；

添加事件的方法中第三个参数布尔值就是控制事件的阶段的，false则为冒泡事件，true则表示的是捕获事件：

 <!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;} #box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);} #box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);}      #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box2').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box3').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);</script></html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段相关推荐

JavaScript文档对象模型document对象改变Html元素样式属性(5)
1. document对象改变Html元素样式属性行内样式操作案例如下: <!DOCTYPE html> <html><head><meta charset ...
DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探
规范 <style type="text/css"></style> <script type="text/javascript" ...
html设置返回的样式,jQuery设置或返回元素样式属性。
jQuery css() 方法css() 方法设置或返回被选元素的一个或多个样式属性. 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); ...
html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
GWT更改元素样式属性
GWT有时候不像普通网页那样可以自由的添加CSS改变样式,所幸gwt提供了一些底层的方法,通过这些方法来实现DOM操作等.通过gwt部件的getElement()可以取得dom上的元素,这时就能对该元 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
CSS常用样式属性锦集
以下快捷键针对webstorm,idea也可以用一.文字属性 1.文字样式属性格式:font-style: italic; 取值:normal:正常显示 italic:斜体快捷键: fs fon ...
【qml】设置Component内多级子孙元素的属性的快捷方法
如:想要设置下面代码中Text子元素的text属性.可以在根元素定义一个属性,然后把想要设置的子孙元素的属性和根元素这个属性关联即可. Window {property string realText ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段相关推荐

最新文章

热门文章