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

苦海123

已于 2024-03-19 23:06:05 修改

阅读量227

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

于 2021-04-26 07:53:26 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116142189

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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); //undefined
                    this.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联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend过渡监听事件：过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {
复制链接

扫一扫