JS-dom元素事件的操作（1.直接绑定-动态绑定，2.事件的闭包，3.事件监听，4.事件冒泡机制，5.事件冒泡还是捕获，6..事件的对象-坐标+键盘事件对象，7.事件的委托）

最新推荐文章于 2022-06-22 14:11:07 发布

进击的小野马

最新推荐文章于 2022-06-22 14:11:07 发布

阅读量149

点赞数

分类专栏： JS 文章标签： html5 css3 javascript 前端 css

本文链接：https://blog.csdn.net/mab_1994/article/details/110433011

版权

本文详细探讨了JavaScript中DOM元素的事件操作，包括直接绑定和动态绑定事件、事件闭包、事件监听、事件冒泡机制、捕获模式，以及事件对象的使用，如坐标和键盘事件对象，并讲解了事件委托的概念。

摘要由CSDN通过智能技术生成

dom元素添加事件-直接绑定-动态绑定

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dom元素添加事件-直接绑定-动态绑定</title>
    <style>
        *{
    
            margin: 0px;
            padding: 0px;
        }

    </style>
</head>
<body>
<button id="but" onclick="fun1()" onmouseover="fun2()">按钮</button>
<button id="btn">按钮事件</button>


<script>
    /*
     * dom元素添加事件
     * */
    //1.直接在元素上直接绑定事件   this指针指向当前事件的执行对象
    function fun1(){
    
        //直接在元素上添加事件
        //函数不传递this  函数内部的this  指window
        //如果传递this  函数内部的参数  指当前的对象
        console.log("你点我",this);
    }
    but.click();/*自动触发*/
    
    function fun2(){
    
        console.log("你悬停我");
    }
    //1).获取元素的属性
    console.log(but.attributes);

    //removeNamedItem() 方法可删除指定的节点
    but.attributes.removeNamedItem("onmouseover");

    // getNamedItem() 方法返回节点列表中指定属性名的值
    console.log(but.attributes.getNamedItem("onmouseover"));

    //2).设置元素属性
    //createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性。
    var args = document.createAttribute("onmouseenter")
    //nodeValue 属性根据节点的类型设置或返回节点的值。
    args.nodeValue="fun2()";
    //setNamedItem() 方法用于添加指定节点。
    //如果节点已经存在，它将被替换，并返回替换节点的值，否则将返回 null。
    but.attributes.setNamedItem(args);

    //3).自定义属性设置
    but.setAttribute("onmousemove",'fun3()');
    //2.动态绑定事件
    //this指针指向当前事件的执行对象
    btn.onclick=function(){
    
        console.log("你点我",this);
        //移除这个事件 只生效一次
        this.onclick=null;
    }

</script>
</body>
</html>

事件的闭包

<!DOCTYPE html>
<html>
<head lang="en"

最低0.47元/天解锁文章

进击的小野马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-dom元素事件的操作（1.直接绑定-动态绑定，2.事件的闭包，3.事件监听，4.事件冒泡机制，5.事件冒泡还是捕获，6..事件的对象-坐标+键盘事件对象，7.事件的委托）

dom元素添加事件-直接绑定-动态绑定<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>dom元素添加事件-直接绑定-动态绑定</title> <style> *{ margin: 0px; padding: 0px; } .
复制链接

扫一扫

专栏目录