• jQuery

    浏览器下的event对象

          在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。

    1.keyCode||which||charCode

          IE下支持keyCode，不支持which，charCode。
          Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性
          要获取兼容IE和Firefox的键值，有如下方法：
          在函数调用时传递event  
    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Demo</title>
    <script type="text/javascript">
        function test_event(e){
            var e=e||event;   
            currKey=e.keyCode||e.which||e.charCode;     
            document.getElementById("key").value = currKey;
        }
    </script>
    </head>

    <body>
    <input type="text" onkeyup="test_event(event)"/>
    <input type="text" id="key">
    </body>
    </html>
    复制代码

          在函数调用时不传递event
    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Demo</title>
    <script type="text/javascript">
        function test_event(e){
            var e=arguments.callee.caller.arguments[0]||event;   
            currKey=e.keyCode||e.which||e.charCode;     
            document.getElementById("key").value = currKey;
        }
    </script>
    </head>

    <body>
    <input type="text" onkeyup="test_event()"/>
    <input type="text" id="key">
    </body>
    </html>
    复制代码
      


    2.event.srcElement||event.target

         在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性
    解决办法很简单：
        

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <style type="text/css">
            .focus
            {
                color: Red;
            }
        </style>
        <script type="text/javascript">
            function test_event(event) {
                var evt = event.srcElement || event.target;
                evt.className = "focus";
            }
        </script>
    </head>
    <body>
        <input type="text" id="text1" value="text1" onfocus = "test_event(event)"/>
        <input type="text" id="text2" value="text2" onfocus = "test_event(event)"/>
        <input type="text" id="text3" value="text3" onfocus = "test_event(event)"/>
    </body>
    </html>
    复制代码


    3.event.x,event.y||event.pageX,event.pageY

          IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法：
          var mx = event.x?event.x:event.pageX;

    4.attachEvent()||addEventListener()

    IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
    attachEvent("eventType",fun)
    eventType是指事件类型,fun是指调用事件的函数
    addEventListener("eventType",fun,flag)
    addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <script type="text/javascript">
            function test() {
                var str = "为了兼容IE和Firefox，就要多写代码！";
                alert(str);
            }
            function test_event() {
                var obj = document.getElementById("btn");
                if (document.all) {
                    obj.attachEvent("onclick", test);
                }
                //注意两个方法的第一个参数，一个是"onclick",一个是"click"
                else {
                    obj.addEventListener("click", test, false);
                }
            }
            window.onload = test_event;
        </script>
    </head>
    <body>
        <input type="button" value="测试按钮" id="btn" />
    </body>
    </html>
    复制代码



          我所知道的常用的event属性或方法就是上面那4条。上面的东西虽然不复杂，但是我会经常遗忘，jQuery则帮我们很好的解决了这些问题，我们通过jQuery无需再去判断浏览器是否支持某某属性，某某方法。
          首先看看jQuery对象有哪些属性和方法
         

    下面是jQuery事件对象可以在扩浏览器支持的属性:

    属性名称 描述 举例
    type
    		事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. 
    $("a").click(function(event) {
      alert(event.type);
    });
    target
    		 获取事件触发者DOM对象 
    $("a[href=http://google.com]").click(function(event) {
      alert(event.target.href);
    });
    data
    		 事件调用时传入额外参数. 
    $("a").each(function(i) {
      $(this).bind('click', {index:i}, function(e){
         alert('my index is ' + e.data.index);
      });
    });
    relatedTarget
    		 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
    $("a").mouseout(function(event) {
      alert(event.relatedTarget);
    });
    currentTarget
    		 冒泡前的当前触发事件的DOM对象, 等同于this. 
    $("p").click(function(event) {
      alert( event.currentTarget.nodeName );
    });

    结果:P
    pageX/Y
    		鼠标事件中, 事件相对于页面原点的水平/垂直坐标. 
    $("a").click(function(event) {
      alert("Current mouse position: " + event.pageX + ", " + event.pageY );
    });
    result
    		 上一个事件处理函数返回的值 
    $("p").click(function(event) {
      return "hey"
    });
    $("p").click(function(event) {
      alert( event.result );
    });

    结果:"hey"
    timeStamp
    		 事件发生时的时间戳. 
    var last;
    $("p").click(function(event) {
       if( last )
          alert( "time since last event " + event.timeStamp - last );
       last = event.timeStamp;
    });

    名称 说明 举例
    preventDefault()
    		取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. 
    $("a").click(function(event){
      event.preventDefault();
      // do something
    });
    isDefaultPrevented()
    		 是否调用过
    preventDefault()
    方法    		 
    $("a").click(function(event){
      alert( event.isDefaultPrevented() );
      event.preventDefault();
      alert( event.isDefaultPrevented() );
    });
    stopPropagation()
    		 取消事件冒泡 
    $("p").click(function(event){
      event.stopPropagation();
      // do something
    });
    isPropagationStopped()
    		 是否调用过
    stopPropagation()
    方法    		 
    $("p").click(function(event){
      alert( event.isPropagationStopped() );
      event.stopPropagation();
      alert( event.isPropagationStopped() );
    });
    stopImmediatePropagation()
    		 取消执行其他的事件处理函数并取消事件冒泡.

    如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.    		 
    $("p").click(function(event){
      event.stopImmediatePropagation();
    });
    $("p").click(function(event){
      // This function won't be executed
    });
    isImmediatePropagationStopped()
    		 是否调用过
    stopImmediatePropagation()
    方法    		 
    $("p").click(function(event){
      alert( event.isImmediatePropagationStopped() );
      event.stopImmediatePropagation();
      alert( event.isImmediatePropagationStopped() );
    });


    这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.
  • 相关阅读:
    03 在百度地图上定位到指定位置
    01 如何将百度地图加入IOS应用程序？
    三个字理解委托机制
    iOS 应用程序打包、真机调试 方法
    在读iOS官方文档时，里面有很多你不懂的单词，不要担心
    用“大控件”与“大数据类型”思想来理解view Cotroller
    04 将当前位置用大头针标注到百度地图上
    02 使用百度地图获得当前位置的经纬度
    专注分享思考过程
    像孙正义为了练英语坚决不说日语一样。我也应该有坚决不看中文文档的心！
  • 原文地址：https://www.cnblogs.com/webph/p/5252033.html
Copyright © 2020-2023  润新知