9、JS高级与事件
function outer() { var data = {} function inner() { return data; } return inner; } // 闭包目的:不允许提升变量作用域时,该函数的局部变量需要被其他函数使用 // 闭包本质:函数的嵌套,内层函数称之为闭包 // 闭包的解决案例:①影响局部变量的生命周期,持久化局部变量;②解决变量污染
.html文件
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
.js文件 var lis = document.querySelector('li'); for (var i = 0; i < lis.length; i++) { lis[i].onclick = function () { // 打印列表项的索引 console.log(i); } } // 变量污染 // 获取局部作用域解决 // 闭包解决 // 对象属性解决
var obj = {}; | var obj = new Object(); // 属性 obj.prop = ""; // 方法 obj.func = function () {} // 删除属性与方法 delete obj.prop delete obj.func
2、类字典结构使用
var dict = {name: "zero", age: 18}
- 拓展
var dict = {"my-name": "zero", fn: function () {}, fun () {}}
- 使用
dict.name | dict["my-name"] | dict.fn()
function People(name, age) { this.name = name; this.age = age; this.eat = function () { return 'eat'; } }
class People { // 构造器 constructor (name, age) { this.name = name; this.age = age; } // 实例方法 eat () { console.log('吃吃吃'); } // 类方法 static create () { console.log('诞生'); } }
document.onclick = function() { console.log("文档点击"); } // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法
document.onclick = function() { console.log("文档点击"); } // 事件的移除 document.onclick = null;
document.addEventListener('click', function() { console.log("点击1"); }) document.addEventListener('click', function() { console.log("点击2"); }) // 非on事件可以同时绑定多个方法,被绑定的方法依次被执行 // addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {} document.addEventListener('click', fn); // 事件的移除 document.removeEventListener('click', fn);
<body id="body"> <div id="sup"> <div id="sub"></div> </div> </body> <script> sub.onclick = function (ev) { // 方式一 ev.stopPropagation(); console.log("sub click"); } sup.onclick = function (ev) { // 方式二 ev.cancelBubble = true; console.log("sup click"); } body.onclick = function (ev) { console.log("body click"); } </script>
- 默认事件:取消默认的事件动作,如鼠标右键菜单
<body id="body"> <div id="sup"> <div id="sub"></div> </div> </body> <script> sub.oncontextmenu = function (ev) { // 方式一 ev.preventDefault(); console.log("sub menu click"); } sup.oncontextmenu = function (ev) { console.log("sup menu click"); // 方式二 return false; } body.oncontextmenu = function (ev) { console.log("body menu click"); } </script>
onclick:鼠标点击
ondblclick:鼠标双击
onmousedown:鼠标按下
onmousemove:鼠标移动
onmouseup、ommouseenter:鼠标抬起
onmouseover、onmouseleave:鼠标悬浮
onmouseout:鼠标移开
oncontextmenu:鼠标右键
- 事件参数ev
ev.clientX:点击点X坐标
ev.clientY:点击点Y坐标
onkeydown:键盘按下
onkeyup:键盘抬起
- 事件参数ev
ev.keyCode:按键编号
ev.altKey:alt特殊按键
ev.ctrlKey:ctrl特殊按键
ev.shiftKey:shift特殊按键
onfocus:获取焦点
onblur:失去焦点
onselect:文本被选中
oninput:值改变
onchange:值改变,且需要在失去焦点后才能触发
onsubmit:表单默认提交事件
文档事件由window调用
onerror:图片加载失败
onscroll:页面滚动
onresize:页面尺寸调整
window.scrollY:页面下滚距离