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

苦海123

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

阅读量539

点赞数 1

CC 4.0 BY-SA版权

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

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

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

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) {