深入浅出JavaScript8章节第05章DOM事件

01HTML事件:

直接在HTML元素的标签内添加事件,执行脚本。
语法:
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用

01鼠标事件
onload:页面加载时触发
onclick:鼠标点击时促发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfoucs:获取焦点时触发
onblur:失去焦点时触发
onchange:域内容发生改变是触发

02鼠标事件
onsubmit:表单中确认按钮被点击时发生(注释:加在表单上!!!不是按钮上!)
onmousedown:鼠标按钮在元素上按下时触发
onmousemove:在鼠标指针移动时发生
onmouseup:在元素上松开鼠标按钮时触发
onresize:当浏览器调整窗口大小时触发
onscroll:拖动滚动条时触发

键盘事件与KeyCode属性
onkeydown:在用户按下一个键盘按键时发生
onkeypress:在键盘按下并释放一个键时发生
onkeyup:在键盘按键松开时发生
keyCode:(返回onkeypress,onekeydown or onkeup事件触发的键的值的字符代码,或键代码)

关于this指向
在事件触发函数中,this是对DOM对象的引用。



    
        
        Test
        
    
    

        
        
        
开 始
深入浅出JavaScript8章节第05章DOM事件_第1张图片
image.png

02 DOM 0级事件
1.通过DOM获取HTML元素
2.(获取HTML元素).事件=执行脚本
语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明:执行脚本可以是一个匿名还是,也可以是一个函数的调用



    
        
        Test
        
    
    

        
        
        
锁定
深入浅出JavaScript8章节第05章DOM事件_第2张图片
image.png

深入浅出JavaScript8章节第05章DOM事件_第3张图片
image.png


    
        
        Test
        
        
    
    
        
亲输入6位有效的手机号码

        
亲选择你喜欢的BGCOLOR
深入浅出JavaScript8章节第05章DOM事件_第4张图片
image.png

        

        
你还可以输30
深入浅出JavaScript8章节第05章DOM事件_第5张图片
image.png

你可能感兴趣的:(深入浅出JavaScript8章节第05章DOM事件)