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

为元素绑定事件的方法
/**
 * 根据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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值