DOM事件对象:

事件:发生了一件事

事件处理程序:一个函数,当某件事发生时运行

事件注册: 将一个处理程序绑定在某个事情上   利用on来绑定

DOM 0  每个dom对象只能绑定一个事件和一个事件处理程序

DOM2 每个DOM 对象可以绑定多个事件和多个事件处理程序  执行顺序谁先绑定谁先执行

事件解绑  DOM    在注册事件中给绑定事件类型赋值:  undefined和  null

DOM 2 事件removeEventListener('事件类型',需要被移除的处理程序 函数名不加括号);

   // DOM  0中的事件注册的方法   
        btn.onclick=function(){
            // 随便打印一句话!
            console.log('什么时间,做什么事!');
            // btn中的解绑方法   给onclick赋值为   undefined  或者  null
            btn.onclick=null;
            // console.log(btn.onclick);
        }
        // 第二种 DOM 2 的添加事件注册方法
        btn.addEventListener('click',text);
        // 解绑添加的事件注册
        btn1.addEventListener('click',function(){
            btn.removeEventListener('click',text);
        });

        function text(){
            console.log('搞钱就对了!');
        }

事件流:

事件发生时,页面中该元素的父级元素会监听到点击事件

ie:事件应该时冒泡事件(默认) 先触发点击的事件目标然后依次向父级传递  监听

网景:事件应该时捕获出发,最先触发最外面的父级元素的点击事件  让后触发点击目标事件

冒泡事件

捕获事件   

事件对象封装了一系列的与事件相关的信息,浏览器封装好了传递给事件

获取:通过事件处理的函数的参数

获取事件对象的兼容问题

ie 兼容的方法: e=e||e.event;  事件的通用对象 e

e.target && e.srcElement   都是指向的事件目标      (事件目标:谁被点击谁就是事件目标)

事件委托

理解就是:在父级元素上添加点击事件,用子元素来点击显示效果在事件处理程序中判断事件目标并进行其它的操作

e.currentFargt与this全等  都是指向的是绑定事件的元素

e.preventDofault()  阻止默认事件

  // 首先获取元素的节点
        var  form=document.forms[0];
        var  input=document.getElementsByTagName('input')[0];
        var btn=document.getElementsByTagName('input')[1];
        // console.log(btn);
        // 给form表单元素添加事件处理
        form.addEventListener('click',function(e){
            // 判断如果输入框中没有输入,着阻止默认事件
            if(input.value==""){
                e.preventDefault();
            }
        })
        // 检测是否可以阻止跳转
        btn.addEventListener('click',function(){
            console.log(input.Value);
        })

 

e.stopPropagation() 阻止冒泡事件 ,阻止设置元素,他的父级事件触发冒泡事件

   // 给按钮添加点击事件   利用循环每个都可以点击
            btn[i].addEventListener('click',function(){
                console.log('btn');
                // for(var j=0;j<btn.length;j++){
                //     ul.removeChild(li[j]);
                // }
                // console.log(li[i]);
                
                // console.log(e.target===e.srcElement);
            })
            // 给a标签添加点击事件
            a[i].addEventListener('click',function(e){
                console.log('a');
                // 给标签添加一个阻止冒泡事件,理解就是不让其事件监听到父级元素   阻断冒泡事件的发生
                e.stopPropagation();
            })
            // 给li添加点击事件 
            li[i].addEventListener('click',function(){
                console.log('li');
            })
        }

tagName 等同于 nodeName  都是获取元素节点的标签名

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值