13.4 javascript事件类型

最新推荐文章于 2022-12-05 18:46:40 发布
原创最新推荐文章于 2022-12-05 18:46:40 发布 · 367 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#javascript
javascript学习专栏收录该内容
13 篇文章
订阅专栏
本文详细介绍了网页中的各种事件处理机制，包括但不限于键盘与文本事件、鼠标事件、DOM变动事件等，并探讨了HTML5新增事件及设备方向检测方法。
<!doctype>
<html>
<head>
	<meta charset="UTF8">
</head>
<body>
    <textarea id="aaa"></textarea>
    <a href="http://baidu.com" id="a">点我点我</a>
    <div id="mydiv">自定义上下文菜单事件，右击我显示菜单</div>
    <ul id="myul" style="visibility:hidden">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script type="text/javascript">
    //事件冒泡与事件捕获
    // 事件处理程序以on开头，如onclick，onload等

    //addEventListener如果传入匿名函数，则无法移除

    // 在IE中可以使用attachEvent("onclick",a());注意此时参数是onclick而非click，同时也可以添加多个处理函数，处理函数倒叙执行
    // 而且作用域为window全局作用域，
    var text = document.getElementById("aaa");
    // text.attachEvent("onclick",function(){
    // 	console.log('text click');
    // 	// alert(this === window); //结果为true
    // });


    //使用触摸设备处理时要注意以下几点
    // 1.不支持dbclick
    // ************************************************************键盘与文本事件
    // keydown,keypress,keyup
    // textinput,发生在文本显示之前，是对keypress的补充，
    var a = document.getElementById("aaa");
    a.addEventListener("keydown",function(event) {
        console.log(event.type);//"keydown"
        console.log(event.keyCode);//键码
    },false);

//    textInput属性，inputMethod属性，字符是怎样输入进来的
    a.addEventListener("textInput",function(event){
        console.log(event.data);//注意textInput只在按下实际的字符键时才被触发，而keyPress则不同
//       例如按下了S，则data为S，而keyCode显示键码，为数字型
    })
    //修改link的默认操作
    var link = document.getElementById('a');
    link.onclick = function(event){
        event.preventDefault();
    }
    // stopPropagation()阻止事件冒泡，防止一个事件触发多个程序

    // load()事件，可以在script和link上添加load事件，确认javascript和css加载完毕
    // unload()事件，文档被完全卸载后调用，例如浏览器跳向其他页面，避免内存泄露
    //resize()事件，onresize属性，或者添加事件处理程序
    // scroll()事件，页面滚动，混杂模式下，body.scrollTop,标准模式下documentElement.scrollTop
    //会在屏幕滚动期间不断被触发，因而不要轻易使用，和resize类似
    window.addEventListener("scroll",function(event){
        console.log(event.type);
        if(document.compatMode =="CSS1Compat"){//标准模式
            console.log(document.documentElement.scrollTop);
        }
        else{//混杂模式
            console.log(document.body.scrollTop);
        }
    })
    //    焦点事件
    //    1.blur 失去，不冒泡
    //    2.focus 获得，不冒泡
    //    3.focusin 获得，冒泡
    text.onblur = function(){
        console.log("text blur");
    }
    document.body.onblur = function(){
        console.log("body blur");//不被冒泡，只被触发一次
    }
    text.onfocus = function(){
        console.log("text Focus");
    }
    document.body.onfocus = function(){
        console.log("text Focus");
    }
//   ************************************************** 鼠标事件
//    鼠标点击的位置event.screenX,event.screenY
//    客户区坐标的位置event.clientX,event.clientY
//    页面坐标，event.pageX,event.pageY
//    修改键
//    event.altKey
//    event.shiftKey
//    event.ctrlKey
//    event.metaKey
    // event的属性包含this、target是时间的目标、currentTarget当前时间的处理程序
    // 例如如果button上的click事件冒泡到body上处理，则this和currentTarget==body，而target为button元素


//**************************************DOM变动事件**************************************
// 删除节点，RemoveNode(),ReplaceNode()
// 事件触发次序：
// 1.在被删除节点上触发DOMNodeRemoved事件，event.relatedNode为删除节点的父节点，该事件冒泡
// 2.在被删除节点上触发DOMNodeRemovedFromDocument事件，不冒泡
// 3.在被删除节点的子节点上上触发DOMNodeRemovedFromDocument事件
// 4.在被删除节点的父节点上触发DOMSubtreeModified事件

// 添加节点，appendNode(),replaceNode()，insertBefore()
// 事件触发次序：
// 1.在被添加节点上触发DOMNodeInserted事件，event.relatedNode为删除节点的父节点，该事件冒泡
// 2.在被添加节点上触发DOMNodeInsertedIntoDocument事件，不冒泡
// 3.在被添加节点的父节点上触发DOMSubtreeModified事件

// HTML5事件
// 1.oncontextmenu事件
    var div = document.getElementById("mydiv");
    div.addEventListener("contextmenu",function(event){
        event.preventDefault();//取消事件默认行为
        var ul = document.getElementById('myul');
        ul.style.left = event.clientX+'px';
        ul.style.top = event.clientY+'px';
        ul.style.visibility = 'visible';
    });
    document.addEventListener("click",function(event){
        document.getElementById('myul').style.visibility = 'hidden';
    })

//  2.beforeunload事件，在用户关闭页面时，弹出框口询问是否关闭
    window.addEventListener('beforeunload',function(event){
        var message = '真的要关闭我么？';
        event.returnValue = message;
        return message;
    })
// 3.DOMContentLoaded在DOM树加载好后触发，无论img和javascript文件是否已经加载完成
// 而load事件，需要全部加载完成，
    document.addEventListener('DOMContentLoaded',function(event){
        console.log('DOMContentLoaded'+event.target.toString());//target对象是document
    })


// 4.readystatechange事件，包含readyState属性，有以下五个值，IE，firefox4+，opera支持此事件
// uninitialized，loading，loaded，interactive，complete
// script（opera和IE中）和link(IE中)元素也能触发此事件，使用readyStateChange可模仿DOMContentLoaded事件
    document.addEventListener('readystatechange',function(event){//这个event没有任何属性值,它和load事件的触发无先后顺序
        if(document.readyState == 'interactive'||document.readyState == 'complete'){
            console.log('DOMContentLoaded!文件DOM加载完成');
        }
        else{
            console.log(document.readyState);//输出另外几种状态，complete
            //argument.callee指向函数本身
        }
    })

//  5.firefox和opera中，整个页面缓存在内存（bfcache）中，一般不会触发load事件。
//    firefox、safari5+，chro，opera支持，pageshow和pagehide属性，浏览器上的前进和后退按钮。
//    pageshow在页面显示时触发，目标是document但是需要将触发事件添加到window上。
//    persisted属性，true该页面被保存在bfcache中，false无
//    pagehide在unload事件之前触发
    var showCount = 0;
    window.addEventListener('pageshow',function(event){
        showCount++;
        console.log('show'+showCount);
    })
    var loadCount = 0;
    window.addEventListener('load',function(event){
        loadCount++;
        console.log('load'+loadCount);
    })

//  6.haschange,页面的url发生变化,两个属性event.oldURL和event.newURL,window.location.hash类似


//    **************************************设备方向的检测******************
//    1.orientationchange，safari
//    2.MozOrientation，firefox
//    3.deviceorientation事件
//    4.devicemotion，设备的移动，设备是否在下坠

//    **************************************触摸与手势事件**************************************
//    touchStart
//    touchEnd
//    touchMove
//    touchCancle
//    手势事件 gesturestart，gesturechange，gestureend





</script>
</html>