其实.bind(), .live(), .delegate()都是通过.on()来实现的

stopPropagation()函数用于阻止当前事件在DOM树上冒泡。该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click   
} );
// 为div元素内的所有button元素的click事件绑定处理函数
$("div").live("click", ":button", function(event){
    alert("button-click");
    event.stopPropagation();
} );
// 点击按钮，所有事件处理函数都会执行
// 因为live()函数先直接冒泡到document，然后再来触发事件，因此它无法阻止事件冒泡(执行函数时都已经冒泡完毕，当然无法阻止)
// 为div元素内的所有button元素的click事件绑定处理函数
$("div").delegate(":button", "click", function(event){
    alert("button-click");
    event.stopPropagation();
} );
// 点击按钮，会执行p-click和button-click
// 因为delegate()函数会把button元素的点击事件委托给div元素来触发，所以事件必须冒泡到div元素才能触发，它无法阻止button到div之间的事件冒泡，所以会执行p-click。

总结:如下

1、”stopPropagation()函数无法阻止live事件的冒泡。”

2、”stopPropagation()函数无法阻止该元素到”受委托”的祖辈元素之间的事件冒泡。”

1、$(“#id”).on(“click”, function(event){ event.stopPropagation(); }); 这样是可以阻止#id元素向外进行事件冒泡的。

$(“#wrapper”).on(“click”, “#id”, function(event){ event.stopPropagation(); );

但是如果on()采用的是类似上述的事件委托机制来处理，那么是无法阻止#id到外部#wrapper之间的事件冒泡的，只能阻止#wrapper到document的事件冒泡。

所以说，不管是delegate、live、还是on，只要是采用事件委托机制，那么目标元素到受委托的“祖辈”元素之间的事件冒泡，stopPropagation()是无法阻止的，这种情况是存在的哦。

在工作中被冒泡(jhiq)事件给整得快费了,网上找了下资料,最后自己整理了个下面可用的,但最好用最下面的方法4,完美有没有!

1
2
3
4
5
6
7
8
9

function fnb(e,th){ //IE9及以上都支持
         alert(1);
         console.log($(th).html());
         console.log(e.clientX);
         e.stopPropagation();
      }
      document.onclick=function(){
         alert('document')
      }

也可以中间层 取消泡泡
网页里有两种获取事件对象的办法。一种是访问window.event属性，另一种便是事件函数的第一个参数。

IE里只支持window.event，Firefox只支持参数的形式，而其他主流浏览器两者都支持。

所以平时为了兼容FF，一般都写成：function handle(e){有= e||event;}

虽然这样大多数情况下能运行，但是对于内嵌的调用就有问题了。比如，虽然我们可以把arguments[0]当做参数传递过去，但很多情况下这里都是this，因为handle可能绑定了多个元素。

===================

IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。
所以一行代码就可以搞定var evt = window.event || arguments[0];

下面分四种获取方式。

1,第一种添加事件的方式，直接在html的属性中写JS代码

Div1 Element

如何在这种添加事件方式下获取到事件对象？IE中很简单，因为event是作为全局对象的，所以直接使用event即可，如下

点击该Div后，IE中会弹出’click’字符的信息框。说明事件对象获取到了，如果在 Opera/Safari/Chrome 中也测试了，会发现效果和IE一样，说明 Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。

Firefox中会报错，提示：window.event is undefined，说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的，

上面的用 window.event 来获取事件对象，其实window可以省略的，
就像使用alert而不是window.alert一样。如

在 IE/Opera/Safari/Chrome 中测试，和刚刚不会有什么区别。在Firefox中再测，会有个惊喜，你会发现居然弹出的是”click”信息框，而不是”undefined”。
两次测试区别仅仅一个用window.event.type，一个用event.type。这个问题下面详细讨论。
下面用句柄第一个参数来获取事件对象，可以把onclick属性的值想象成一个匿名函数，onclick属性值的字符串实际上都是这个匿名函数内的js代码。
既然这样，我们就可以通过Function的一个属性argumengs获取到该匿名函数的第一个参数，而该参数就是事件对象。如

　　
在各浏览器中点击该Div，结果如下：
IE6/7/8 :
function onclick(){ alert(arguments.callee);}
IE9 :
function onclick(event){ alert(arguments.callee);}
Firefox / Safari :
function onclick(event) { alert(arguments.callee);}
Chrome :
function onclick(evt) { alert(arguments.callee);}
Opera :
function anonymous(event) {alert(arguments.callee);}
观察这些函数发现：
IE6/7/8没有定义参数
IE9/Firefox/Safari/Opera 定义了参数event
Chrome定义了参数evt。(注：新版chrome已改为event)

现在回到上面遗留的问题，如下

这两个div的区别仅window.event.type和event.type。分别点击后，后者在Firefox中不弹出”undefined”，而是”click”，是因为Firefox中匿名函数定义了参数event，该参数刚好与IE的全局对象event同名，从而误以为Firefox也支持IE方式获取事件对象。

同样的道理，Chrome中定义的参数是evt，那么在Chrome中还可以通过以下方式获取事件对象，如下

2，第二种添加事件的方式，定义一个函数，赋值给html元素的onXXX属性

这种方式也比较早期，但好处是可以将JS与HTML完全分离，但前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)。
这种方式添加事件IE6/7/8只支持window.event不支持参数传入，Firefox只支持参数传入不支持其它方式。
IE9/Opera/Safari/Chrome 两种方式都支持。

4，第四种添加事件方式，使用addEventListener或IE专有的attachEvent

这是目前推荐的方式，较前两种方式功能更为强大，可以为元素添加多个句柄(或称响应函数)，支持事件冒泡或捕获，前三种方式默认都是冒泡。
当然IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent，且不支持事件捕获。IE9 中已经支持addEventListener了。

先用window.event测试，如

　　
点击Div[id=d4]，IE/Opera/Safari/Chrome都正确的弹出了事件对象信息框，Firefox弹出的是”undefined”，预料之中，因为Firefox不支持window.event作为事件对象。
再换成句柄的第一个参数测试，如

　　
测试之前，猜测一下什么结果，可能有人会觉得IE中应该弹出undefined，其它浏览器都是事件对象。
事实上所有浏览器弹出的信息框显示都是事件对象。

1，IE6/7/8支持通过window.event获取对象，通过attachEvent方式添加事件时也支持事件对象作为句柄第一个参数传入
2，Firefox只支持事件对象作为句柄第一个参数传入
3，IE9/Opera/Safari/Chrome两种方式都支持

一直想写自己总结的东西,可是总是没有总结到东西,所以一进在看别人的总结,记录并加以修改。这篇文章是segmentFault上的,但没看到作者,如要看原文章,可以去segmengFault上去找找看

DOM级别与DOM事件

DOM级别 : DOM0 DOM1 DOM2 DOM3
DOM事件 : DOMO级事件 DOM2级事件 DOM3级事件

DOM0级事件

DOM0级事件就是把一个函数赋值给一个事件处理属性,无法绑定多个处理函数。
var btn = document.getElementById(‘btn’);
btn.onclick = function(){
alert(1)
}
btn.onclick = null;//解绑事件

DOM2级事件

btn.addEventListener(‘click’,showFn,false);
bnt.addEventListener(‘mouseover’,showFn,false);
btn.removeEventListener(‘click’,showFn,false);
IE8及以要用以下方法:IE8及以下不支持泡泡事件
btn.attachEvent(‘click’,showFn);
btn.detachEvent(‘click’,showFn);

DOM3级事件 在DOM2级事件的基础下加了更多的事件类型

UI事件:load scroll
焦点事件:blur focus
鼠标事件:dbclick mouseup
滚轮事件:mousewheel
文件事件:
键盘事件:
变动事件:

DOM事件流

addEventListener
true 在捕获阶段执行
false 在泡泡阶段执行
阻止泡泡事件

child.addEventListener(‘click’,function(e){
alert(1);
e.shopPropagation();
},false);

用的时候注意下版本号，查看下对应的API

Read More

经常会遇到各种问题，并得到解决，可很多时候问题过了很久又会重新遇到，并且不记得自己当时的解决方案，再重新找，相当浪费时间

sublime text

1
2
3

Q:
	npm intstall =>Package Control  There are no packages available for installation
A:

jquery

gulp

webpack

hexo

1
2
3

更换主题时theme : next  从yilia 换回next时遇到以下问题，我又换回了yilia
Unhandled rejection Error: ENOENT: no such file or directory, open '.../themes/next/layout/_scripts/schemes/.swig'
    at Error (native)

以前一直零散的在用sass，没有系统的做一下整理，最近换了电脑用sass的时候又遇到了各种问题，不记得自己安装过什么依赖，什么软件，因为安装得太多了，把以前的弯路又走了一回。
以下只是sass相关，非gulp，webpack下安装，后期我自己乱了，理解成没有gulp,webpack等sass是没法自己存在的。又一次说明了整理的重要性。

Read More

用法没什么可说的，很好用，只是各种插件得有个了解。

side bar 增强的侧边栏
Docblockr 增强的js注释
alignment 等号对齐
Emmet 用缩写形式写代码
fileDiffs 比较文件差异
sublimeLinter 代码检查插件

title: 动web资源整理-非原创
date: 2016-09-01 20:35:23
tags: 动web资源整理-非原创
— 移动
原文地址 ： http://www.cnblogs.com/PeunZhang/p/3407453.html

1
2
3
4

解决Chrome 自动填充的表单是淡黄色的背景，但是会影响input设置背景
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

以下是git应用的相关记录

1
2
3
4
5
6
7
8
9

git fetch  拉取文件  
git merge 合并文件 
git add 加入
git commit -m “提交信息” 提交本地
git push origin maser v1.0 合并到远端库

关于配制与如何跟github相关联…

以前没怎么用过jquery-ui相关的东西。最近在项目中有用到。

jQuery Validate 表单验证 http://www.runoob.com/jquery/jquery-plugin-validate.html
jQuery dialog 对话框
jQuery 图上传

Read More