2016年2月19日、個人のブログ記事 - segmentfaultへ移動
我々は異なるブラウザ間でJSコードの互換性を考慮して、JSでイベントを処理するために書くとき、コードが覚えているので、次の順序を作ることは容易ではありません。(もちろん、将来的には...更新増えます)
次のようにサンプルコードは次のとおりです。
(1)デフォルトのイベントを防ぐために
obj.onclick=function(ev){
var event=ev||window.event;
if(event.preventDefault){
event.preventDefault(); /*W3C标准*/
}else{
event.returnValue=false; /*兼容IE*/
}
}
ヒント:戻りfalseが、また、デフォルトのイベントを防ぐが、注意を払うの場所にすることができます。
(2)次の(上の)兄弟ノードを取得します
function nextnode(obj){ /*获取下一个兄弟节点*/
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
}
}
function prenode(obj){ /*获取上一个兄弟节点*/
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
}
}
(3)最初の子(最後の)ノードを取得します
function firstnode(obj){/*获取第一个子节点*/
if (obj.firstElementChild) {
return obj.firstElementChild;/*非IE678支持*/
} else{
return obj.firstChild;/*IE678支持*/
}
}
function lastnode(obj){/*获取最后一个子节点*/
if (obj.lastElementChild) {
return obj.lastElementChild;/*非IE678支持*/
} else{
return obj.lastChild;/*IE678支持*/
}
}
(4)(削除)イベントリスナーを追加します。
function addEvent(obj,type,fn){ /*添加事件*/
if(obj.addEventListener){
obj.addEventListener(type,fn,false); //非IE添加事件监听
}else{
obj.attachEvent('on'+type,fn); //IE添加事件绑定
stopEvent();
}
}
function removeEvent(obj,type,fn){ //移除事件
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false); //非IE移除事件,移除事件,第三个参数必须是函数名
}else{
obj.detachEvent('on'+type,fn); //IE移除事件
}
}
(5)例えば、イベントの拡散を防ぐために、イベントをクリックします
obj.onclick=function(ev){
var event=ev||window.event;
alert('aa');
if(event.stopPropagation){
event.stopPropagation(); //非IE阻止事件传播
}else{
event.cancelBubble=true; //IE阻止事件传播
}
}
(6)マウスは、異なるサブエレメント間の問題を点滅するとき(しばしば容器のフローティング要素を除去するために使用されるイベントデリゲートマウスオーバーおよびマウスオーバーちょうど関数関数(EV){}次のコードを先頭に付加されています)
// mouseover委托事件
var event=ev||window.event;
// var from=event.fromElement||event.relatedTarget;
//在mouseover事件中from,表示鼠标来自哪个元素,也是事件委托类型,和target与srcElement相反
// alert(from);
var from=event.fromElement||event.relatedTarget;
while(from){
if (this==from) {
return false;
};
from=from.parentNode;
}
//mouseout委托事件
var event=ev||window.event;
var to=event.toElement||event.relatedTarget;
//在mouseout事件中to,表示鼠标指向那个元素,也是事件委托类型,和target与srcElement相反
// alert(to)
while(to){
if (this==to) {
return false;
};
to=to.parentNode;
}
(7)ホイールイベント
box.onmousewheel=function (ev){
var event=ev||window.event;
// box.innerHTML='鼠标滚动'+event.wheelDelta;
if (event.wheelDelta>0) {
alert('鼠标前滚');//非火狐 前滚120
} else{
alert('鼠标后滚')//非火狐 后滚-120
};
}*/
box.addEventListener('DOMMouseScroll',function (ev){
var event=ev||window.event;
alert(event.detail);//火狐前滚:-3 ,后滚:3
},false)//IE678不支持
負荷需要非同期ロードの8.js
demo.jsは、以下の
function test() {
console.log('hello');
}
index.htmlには、以下の
function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
if(script.readyState){ //ie
script.onreadystatechange=function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback()
}
}
}else{
script.onload=function(){ //Safari chrome firefox opera ----Ie script不具备onload方法
callback();
}
}
script.src=url; //写在这里是为了防止onreadystatechange状态不改变
document.head.appendChild(script)
}
loadScript('demo.js',function(){test()})