继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第十四天 事件处理程序

saluteY
关注TA
已关注
手记 42
粉丝 0
获赞 0

第一模块:

课程名称:DOM事件探秘

章节:2-1~2-4

讲师名称:Amy

第二模块:

  • HTML事件的缺点:

    HTML和JS代码紧密的藕合在一起。

  • 使用事件处理程序:

    HTML事件处理程序

    DOM0级事件处理程序:把一个函数赋值给一个事件的处理程序属性用的比较多的方法 

  • addEventListener(),removeEventListner()。接收三个参数:要处理的事件名,作为事件处理程序的函数,boolean值

  • attachEvent(),detachEvent()。接收两个参数:事件名,事件处理程序的函数

第三模块:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div id='box'>
      <input type='botton' value='按钮' id='btn' onclick='showMessage()' />
      <input type='botton' value='按钮2' id='btn2' />
      <input type='botton' value='按钮3' id='btn3' />
    </div>
   <script>
       function showMes(){
           alert('hello world');
       
       }
       var btn2=document.getElementById('btn2');
       var btn3=document.getElementById('btn3');
       btn2.onclick=function(){
           alert('这是通过DOM0级添加的事件!');
       }
       btn2.onclick=null;
       // DOM2级事件
       btn3.addEventListener('click',showMes,false);
       btn3.addEventListener('click',function(){
           alert(this.value);
       },false);
       
       // IE添加事件处理程序
       btn3.attachEvent('onclick',showMes);
       btn3.detachEvent('onclick',showMes);
       // 跨浏览器事件处理程序:封装方法
       var eventUtil={
           addHandle:function(element,type,handle){
               if(element.addEventListener){
                   element.addEventListener(type,handle,false);
               }else if(element.attachEvent){
                   element.attachEvent('on'+type,handle);
               }else{
                   element['on'+type]=handle;    
               }
           }
       }
   </script> 
</body>
</html>

第四模块:

http://img1.sycdn.imooc.com/6368ff170001ee2713970842.jpg

http://img2.sycdn.imooc.com/636902640001b3c613880856.jpg



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP