javascript - 帮忙解释下JS动态生成事件绑定

Question

在p中动态生成一个P,并且给P绑定一个方法..图一的写法不行,图二的写法可以,为什么??麻烦给为解释下原理~
谢谢咯~

Answer 1

第一种直接在标签中添加点击事件监听函数，在触发调用时只会在全局空间查找函数，而你申明的函数是局部的，外部无法访问，所以不能实现。第二种申明方式实际上是给全局变量window添加了一个属性方法say，跟第一种一样，触发时还是全局空间查找say函数，找到就可以调用了。一般不推荐用你这种直接在标签中加点击事件监听的，因为它只能访问全局空间（window）的属性和方法，最好先查找到这个元素然后再给他设置监听事件。

Answer 2

因为第一种say函数式匿名函数的内部函数，在外部访问不到的，你可以在ready的匿名函数加上window.say = say 试试可以不可以。

Answer 3

我也发现这个问题，在p标签定义事件函数，需要在这个标签定义之前把这个函数写出来。你使用$().ready（）创建p标签的时候，函数还未被定义，所以当然找不到咯。建议使用节点操作的方式增加事件，就不出出现这个问题。

Answer 4

因为 DOM 解析时从全局找函数，而say不在全局域里面。

如果你要绑定某个局部函数，可以这么写：

$(function() {
    var say = function() { alert(111); };
    $p = $('<p>哈哈</p>');
    $p.on('click', say);
    $('#d1').append($p);
});

Answer 5

注意看这个：

$(document).ready(function(){
    //Your code;
});

整个Your code部分都包含在一个匿名函数中，而js唯一实现块级作用域的办法也就是在函数中声明变量，这样在外部环境就访问不到了（其实可以通过闭包访问，但这个问题不涉及）。
因此，你的代码的作用域，也就是执行环境，都只能在这个匿名函数内，所以在外面就访问不到这个say方法了。
那么为什么命名在这个作用域里面创建的p，给它加了个行内事件onclick不行呢？看起来这一切都是在这个匿名函数里面完成的。
原因是在将这个p元素添加到页面的时候，用行内属性的方法给它加事件，这个onclick方法的执行环境是在全局，也就是window对象中，而这个匿名函数产生了一个块级作用域，因此在全局执行的onclick方法自然就访问不到这个块级作用域了。