JS-图片其他事件-Event对象-事件委托-DOM对象

JS-图片其他事件-Event对象-事件委托-DOM对象

1 回顾

1. 事件回调函数中 this 的指向

2. 鼠标事件
   click dblclick contextmenu
   mouseenter mouseleave
   mousedown mouseup  mousemove
   
3. 键盘事件
   keydown  keyup  keypress
   
4. 文档事件
   load  DOMContentLoaded  beforeunload
   
5. 表单事件
   submit   reset
   blur  focus  
   select
   change

2 常用事件总结

2.1 鼠标事件

click			单击
dblclick		双击
contextmenu		右击
mouseover		鼠标悬停在元素上， 建议用 mouseenter 代替
mouseout		鼠标离开元素，建议用 mouseleave 代替
mouseenter		鼠标悬停在元素上
mouseleave		鼠标离开元素
mousedown		鼠标按键按下
mouseup		    鼠标按键抬起
mousemove		鼠标移动

2.2 键盘事件

keydown		键盘按键按下
keyup		键盘按键抬起
keypress	键盘按键按下，用于可输入字符按键

1. 哪些元素可以监听键盘事件？

① document

② 可以获取焦点的元素（表单控件，尤其是可输入的元素）

2. keydown 和 keypress 的区别？

① keydown 所有的按键按下都可以触发，无法区分大小写按键。

② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。

3. 如何获取按下的是哪个按键？

使用 event 对象中的属性：

• evnet.keyCode 获取按键对应的 ascii 值

• event.which 同 keyCode

• event.key 获取按键的字符值。

2.3 文档事件

load				页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素
DOMContentLoaded	页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 						addEventListener 监听事件
beforeunload		当关闭网页的时候触发

load 事件与 DOMContentLoaded 事件的区别：

① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。

② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。

2.4 表单事件

submit		当表单提交的时候触发，该事件监听到form元素	
reset		当表单重置的时候触发，该事件监听到form元素
focus		当表单控件获取焦点的时候触发
blur		当表控件单失去焦点的时候触发
select		输入框或文本域中的内容被选中
change		对于输入框，内容改变且失去焦点才会触发；适合用于select

2.5 图片事件

load		图片文件下载完毕
error		图片加载失败

var imagesBox = document.querySelector('#images')
        // 定义数组
        var imgData = ['db01.jpg','db02.jpg','db03.jpg','db04.jpg','db0102.jpg','db05.jpg','db06.jpg']
        // 根据数据动态的创建图片
        imgData.forEach(function(item) {
   
            // 创建图片元素
            var imgEle = new Image();
            // 指定图片元素的src地址
            imgEle.src = 'images/'+item;
            // 把新的img元素添加到images
            imagesBox.appendChild(imgEle);
            // 监听图片加载完毕事件
            imgEle.onload = function() {
   
                this.style.opacity = 1;
            }
            // 监听图片加载失败的事件
            imgEle.onerror = function() {
   
                this.src = 'images/noimage.png'