JavaScript事件-526互联

JavaScript事件

键盘事件：keypress键盘事件，keyup抬起，keydown按下

文档：load加载

表单：focus获得焦点，blur失去焦点，submit提交事件，change改变事件

其他：scroll滚动事件，select start选择事件

1. event事件对象常见的属性和方法

e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准ie6-8使用
e.type	返回事件的类型，比如：click，mouseover 不带on
e.returnValue	该属性阻止默认事件（默认行为） ie6-8，比如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为）标准，比如不让链接跳转
e.stopPropagation()	阻止冒泡【标准】
e.cancelBubble	阻止冒泡【ie】

2.鼠标事件（只适用于PC端）

最重要: onclick onmouseenter onmouseleave

次重要： onmousedown onmouseup onmousemove

dom.onclick 单击事件
dom.ondblclick 双击事件
dom.onmouseover 当鼠标悬停时（会冒泡）
dom.onmouseout 当鼠标悬停后离开时  （会冒泡）
dom.onmouseenter  当鼠标进入时 （不会冒泡）
dom.onmouseleave 当鼠标离开时 （不会冒泡）
dom.onmousedown 鼠标按下的时候触发的事件
dom.onmouseup 鼠标弹起触发的事件
dom.onmousemove 鼠标移动
dom.onwheel 鼠标滚轮滚动时

3. 键盘事件

onkeydown 键盘按键被按下发生的事件

onkeyup 键盘按键被松开发生的事件

onkeypress 键盘按键按下并松开发生的事件 （主键区）

oninput 事件在用户输入时触发

4. 与光标的事件

onfocus : 主要应用于文本框， 当获取输入焦点时
onblur: 主要应用于文本框，当失去输入焦点时
onchange： 失去输入焦点时，如果和上一次的值比较有改变就会触发

5.表单事件

onsubmit提交按钮被点击
onreset重置按钮被点击
onselect文本内容被选定
onchange用户改变表单元素的内容
oninput在用户输入时触发

6. 移动端事件（只适用于移动端）

touchsatrt：当手指触摸屏幕时触发，不管当前有多少只手指

 touchmove：当手指在屏幕上滑动时连续触发，通常我们再滑屏页面，会调用event.preventDefault()

 touchend：当手指离开屏幕时触发 

touchcancel：系统通知跟踪触摸时候会触发。

7.单选框和复选框被选中

复选框是否被选中需要判断复选框中的checked的值 true：选中 false：没选中

all.onclick = function (){
        for(var n=0; n<sel.length; n++){
            console.log(all.checked);
            sel[n].checked = all.checked
        }
        total()
    }

阻止默认事件的发生

1 如果是使用 on+事件名或者 attachEvent() 添加的事件使用 return false;

<a href="http://www.baidu.com" class="box1">百度</a>

<script>
 var box1 = document.querySelector('.box1')
        box1.onclick = function (event){
            var e = event || window.event
            
            // 跳转京东
            window.location =  "http://www.jd.com"
           return false
        }
</script>

2 如果是使用 addEventListener 添加的事件使用 event.preventDefault();

<a href="http://www.baidu.com" class="box1">百度</a>

<script>
 var box1 = document.querySelector('.box1')
       box1.addEventLister('click',function(event){var e = event || window.event
            
            // 跳转京东
            window.location =  "http://www.jd.com"
           return false
        })
</script>

加载事件

onload               页面或图像加载完成
onbeforeunload       页面卸载前执行

滚动事件

onscroll    窗口发生滚动
scrollTo    滚动到指定位置【增加】

1. clientWidth / clientHeight (只读)

元素padding + width / padding + height

2. offsetWidth / offsetHeight （只读）

获取元素的border + padding + width / border + padding + height

3. offsetLeft / offsetTop（只读）

4. offsetParent （只读）

绝对定位元素的祖先元素中，最近哪个元素有定位属性，这个元素就是它的offsetParent

文档可视区域高度(屏幕的高度) document.documentElement.clientHeight
文档高度(整个html页面的高度) document.documentElement.scrollHeight
文档滚动高度(标准浏览器生效) document.documentElement.scrollTop
文档滚动高度(IE浏览器有效) document.body.scrollTop
获得当前坐标的X，Y坐标 x=event.clientX; Y=event.clientY
获取当前元素的宽度和高度,定位的left和top/元素上面内容的高度

　　　　height=ele.offsetHeight; width=ele.offsetWidth

　　　　left = ele.offsetLeft top = ele.offsetTop

常用的尺寸获取方式：

　　获取页面滚动上去的高度：document.documentElement.scrollTop/document.body.scrollTop

　　获取当前元素的宽度和高度：ele.offsetHeight/ele.offsetWidth

　　获取窗口的宽度和高度：window.innerHeight

　　获取文档的宽度和高度：document.documentElement.scrollHeight

e.target和this的区别

区别： e.target返回的是触发事件的对象（元素）

this 返回的是绑定事件的对象（元素）

e.currentTarget 当前绑定事件的元素

事件javascript event js

javascript事件scroll touch

526互联

JavaScript事件