9、JS高级与事件

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);
    }
}
// 变量污染
// 获取局部作用域解决
// 闭包解决
// 对象属性解决

 

三、面向对象JS

1、属性与方法

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()

3、构造函数（ES5）

function People(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
        return 'eat';
    }
}

4、类及继承（ES6）

class People {
    // 构造器
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    // 实例方法
    eat () {
        console.log('吃吃吃');
    }
    // 类方法
    static create () {
        console.log('诞生');
    }
}

四、事件的两种绑定方式

1、on事件绑定方式

document.onclick = function() {
    console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
    console.log("文档点击");
}
// 事件的移除
document.onclick = null;

2、非on事件绑定方式

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);

五、事件参数event

  • 存放事件信息的回调参数

六、事件的冒泡与默认事件

  • 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件
<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调用 
文档事件由window调用

十一、图片事件

onerror：图片加载失败

十二、页面事件

onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离

 

posted @ 2018-12-19 19:05  Maple_feng  阅读(118)  评论(0)    收藏  举报