DOM中的事件详解(事件的绑定和解绑，事件冒泡以及事件的三阶段)

最新推荐文章于 2024-04-07 07:24:47 发布

杏黄的三叶草

最新推荐文章于 2024-04-07 07:24:47 发布

阅读量209

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104278322

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

为元素绑定事件的方法

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {HTMLElement} 元素对象

function my$(id) {
    return document.getElementById(id);
}

/**兼容代码
 * 设置任意标签中的文本内容
 * @param element
 * @param text
 */
function setInnerText(element,text) {
    //判断浏览器是否支持这个属性
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}


    *1.为元素绑定事件(DOM)，有两种，但是不兼容
    *方法一:对象.addEventLister("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
    *方法二:对象.attachEvent("有on的事件类型",事件处理函数)--谷歌和火狐不支持,IE8支持
    *2.为按钮绑定点击事件
    *参数1:事件的类型---事件的名字,没有on  [string]
    *参数2:事件处理函数---函数(命名函数,匿名函数)
    *参数3:布尔类型的值
    *
    *总结绑定事件的区别:
    *相同点:都可以为元素绑定事件
    *不同点:1.方法名不一样
    * 2.参数个数不一样，addEventListener();有三个参数，而attachEvent();只有两个参数
    * 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
    * 4.attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
    * 5.this不同,addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window
    * 6.addEventListener中事件的类型(事件的名字)没有on，attachEvent中的事件的类型(事件的名字)有on

创建事件的兼容代码

//兼容代码
    //为任意元素.绑定任意的事件
    function addEventListener(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;
        }
    }

为元素解绑事件的方法


    *注意:用什么方式绑定事件，就用什么方式解绑事件
    * 1.解绑事件
    * 对象.on事件名字=事件处理函数--->绑定事件
    * 对象.on事件名字=null;
    my$("btn").onclick=function () {
        console.log("还要多远才能进入你的心，还要多久才能和你接近");
    };
    my$("btn2").onclick=function () {
        my$("btn").onclick=null;
    };
    * 2.解绑事件
    * 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
    * 对象.removeEventListener("没有on的事件类型",函数名,false);
    function f1() {
        console.log("还要多远才能进入你的心，还要多久才能和你接近");
    }
    function f2() {
        my$("btn").removeEventListener("click",f1,false);
    }
    my$("btn").addEventListener("click",f1,false);
    my$("btn2").addEventListener("click",f2,false);
    * 3.解绑事件
    * 对象.attachEvent("on事件类型",命名函数);---绑定事件
    * 对象.detachEvent("on事件类型",函数名字);

解绑事件的兼容代码

<script>
    解绑事件的兼容代码
    为任意的一个元素,解绑对应的事件
    function removeEventListener(element,type,fnName) {
        if(element.removeEventListener){
            element.removeEventListener(type,fnName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,fnName);
        }else{
            element["on"+type]=null;
        }
    }
</script>

事件冒泡


    * 事件冒泡:多个元素嵌套，有层次关系，这些元素都注册了相同的事件，
    * 如果里面元素的事件触发了,那么外面元素的该事件就会自动的触发了
    * 如何阻止事件冒泡:
    * 1.window.event.cancelBubble=true;谷歌支持，IE特有的，火狐不支持
    * 2.e.stopPropagation(); 谷歌和火狐支持,IE不支持

事件的三个阶段


    * 事件有三个阶段
    * 1.事件捕获阶段(1)
    * 2.事件目标阶段(2)
    * 3.事件冒泡阶段(3)
    * 为元素绑定事件:
    * addEventListener("没有on的事件类型",事件处理函数,boolean值)
    * 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
    * window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
    * window.event就是一个对象,是IE中的标准
    * e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
    * window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
    * 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
    * addEventListener中第三个参数是控制事件阶段的,true表示捕获阶段，false表示冒泡阶段
    * 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
    * 冒泡阶段:从里向外;捕获阶段:从外向内

模拟百度搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 450px;
            margin: 200px auto;
        }

        #txt {
            width: 350px;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
<div id="box">
    <input type="text" id="txt">
    <input type="button" value="搜索" id="btn">
</div>
<script>
    var keyWords = ["做个梦给你", "做个梦给你", "等到看你银色满际",
        "等到分不清季节更替", "还要多远才能进入你的心",
        "还要多久才能和你接近", "咫尺远近却无法靠近的那个人"];
    //获取文本框注册键盘抬起事件
    my$("txt").onkeyup = function () {
        //每一次的键盘抬起都判断页面中有没有这个div
        if (my$("dv")) {
            //删除一次
            my$("box").removeChild(my$("dv"));
        }
        //获取文本框输入的内容
        var text = this.value;
        var temp = [];
        for (var i = 0; i < keyWords.length; i++) {
            if (keyWords[i].indexOf(text) == 0) {
                temp.push(keyWords[i]);
            }
        }
        //如果文本框是空的,临时数组是空的,不用创建div
        if (this.value.length == 0 || temp.length == 0) {
            //如果页面中有这个div,删除这个div
            if (my$("dv")) {
                my$("box").removeChild(my$("dv"));
            }
            return;
        }
        //创建div,把div加入id为box的div中
        var dvObj = document.createElement("div");
        my$("box").appendChild(dvObj);
        dvObj.id = "dv";
        dvObj.style.width = "350px";
        dvObj.style.border = "1px solid green";
        //循环遍历临时数组,创建对应的p标签
        for (var i = 0; i < temp.length; i++) {
            //创建p标签
            var pObj = document.createElement("p");
            //把p加到div中
            dvObj.appendChild(pObj);
            setInnerText(pObj, temp[i]);
            pObj.style.margin = "0";
            pObj.style.padding = "0";
            pObj.style.cursor = "pointer";
            pObj.style.marginTop = "5px";
            pObj.style.marginLeft = "5px";
            //鼠标进入
            pObj.onmouseover = function () {
                this.style.backgroundColor = "yellow";
            };
            //鼠标离开
            pObj.onmouseout = function () {
                this.style.backgroundColor = "";
            };
        }
    }
</script>
</body>
</html>

杏黄的三叶草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM中的事件详解(事件的绑定和解绑，事件冒泡以及事件的三阶段)

为元素绑定事件的方法/** * 根据id属性的值,返回对应的标签元素 * @param id id属性的值,string类型的 * @returns {HTMLElement} 元素对象 */function my$(id) { return document.getElementById(id);}/**兼容代码 * 设置任意标签中的文本内容 * @param el...
复制链接

扫一扫

专栏目录