《JavaScript 学习指南》阅读笔记(二)

作者: ghwaphon | 来源:发表于2016-10-09 20:04 被阅读383次
  1. 创建匿名函数的语法为
    var func = new Function("param1","param2",...,"paramn,"function body");
    创建函数字面量的语法为
    var func = function(params){ // function body}
    下面用这两种方式实现乘法功能。
    var funcOne = new Function("x", "y", "return x*y;");
    var funcTwo = function (x, y) {
    return x * y;
    }

     var resultOne = funcOne(2, 3);
     var resultTwo = funcTwo(2, 3);
    
     console.log(resultOne + "\n" + resultTwo);
    

匿名函数和函数自变量都可以当做参数传递给另一个函数。二者的区别是每次调用匿名函数,都会解析一次,而函数自变量自始至终只解析一次。

  1. 我们也可以在 JS 中使用递归函数。

     var func = function add(x) {
         if (x <= 0) {
             return 0;
         } else {
             return x + add(x - 1);
         }
     }
    
     var result = func(4);
     console.log(result);
    
  2. Firefox 中我们可以利用 Firebug 进行调试。

  3. 基于 Netscape 的浏览器和 IE 浏览器处理 Event 事件的方式是不同的,比如鼠标按下事件
    function mouseDown(nsEvent) {
    var theEvent = nsEvent ? nsEvent : window.event;
    var localString = "x = " + theEvent.screenX + ", y = " + theEvent.screenY;
    console.log(localString);
    }

     document.onmousedown = mouseDown;
    

基于 Netscape 的浏览器会将 Event 作为对象的一部分传入,而在 IE 中,将 Event 事件视为 window 的属性。

  1.  <div id="one" style="width: 200px;height: 200px; border: 1px solid red">
         <div id="two" style="width: 100px;height: 100px; border: 1px solid red">
         </div>
     </div>
    
     <script>
         document.getElementById("one").onmousedown = function () {
             alert("one");
         }
    
         document.getElementById("two").onmousedown = function () {
             alert("two");
         }
    
         document.onmousedown = function () {
             alert("document");
         } 
    

对于以上代码,只要我们选中 idtwo 的区域,就会有三个弹出框,依次是 two, one, document , 这种情况我们称之为事件冒泡,那么我们怎么能阻止这种冒泡机制呢?在基于 Netscape 的浏览器中我们使用 stopPropagation() 方法,在 IE 浏览器中我们使用 cancelBubble() 方法。
function stopBubble(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
要先判断 stopPropagation() 方法是否存在,因为 cancelBubble 值为 false 的时候或者属性不存在的时候都会返回 false

  1. 到了 DOM Level2 ,两大浏览器阵营的 Event 事件的绑定仍然不一样,IE 中使用的是 attachEvent(), 基于 Netscape 浏览器使用的是 addEventListener()。对应的,IE 解绑事件用的是 detachEvent(),而其它浏览器基本是使用的都是 removeEventListener(),用法和绑定事件差不多。
    var oneObject = document.getElementById("one");
    if (oneObject.addEventListener) {
    oneObject.addEventListener("click", clickMe, true);
    } else if (oneObject.attachEvent) {
    oneObject.attachEvent("onclick", clickMe)
    } else {
    oneObject.onclick = clickMe;
    }

     function clickMe(event) {
         alert("click me");
     }
    

相关文章

网友评论

    本文标题:《JavaScript 学习指南》阅读笔记(二)

    本文链接:https://www.haomeiwen.com/subject/gytmyttx.html