js操作高级

1.对象使用的高级

• 对象的key为字符串类型, value为任意类型

var obj = {
    name: "name",
    "person-age": 18
}
// 访问
obj.name | obj["name"]
obj["person-age"]

• 对象的属性可以任意添加与删除

var obj = {
   	name: "obj"
}
// 删除
delete obj.name
// 添加
obj.age = 18  // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意
// 注: 获取的页面元素(标签对象)也可以任意添加/删除属性

2.页面标签全局属性操作

ele.getAttribute("alert");
// 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null

ele.setAttribute("attr_key", "attr_value");
// 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值
// 注: 一般应用场景, 结合css的属性选择器完成样式修改

3.事件

• 事件的绑定

// 第一种
box.onclick = function(){}
// 只能绑定一个实现体, 如果有多次绑定, 保留最后一次
// box.onclick = null来取消事件的绑定

// 第二种
var fn = function() {}
box.addEventListener('click', fn)
// 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行
// box.removerEventListener('click', fn)来取消事件的绑定
// 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)

• 事件对象

// 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
    // 使用事件对象
    // 特殊按键 eg: ev.altKey: true | false
    // 鼠标触发点: ev.clientX | ev.clientY
    
    // 取消冒泡
    ev.cancelBubber = true;
    
    // 取消默认事件
    return false;
}