js笔记3dom

hh.style.width;
hh.style.backgroundColor

hh.style.width="500px";
hh.style.backgroundColor="red";

<script type="text/javascript">
//添加简单的dom二级事件demo1
hh.addEventListener('mouseover',function () {
//hh 或 this 他们代表的对象一致，都是h2标题标签的"元素节点对象"
this.style.backgroundColor="lightblue";
hh.style.color="red";
})

//添加简单的dom二级事件demo2
function f1 () {
console.log('111');
}
//为同一个h2元素对象绑定多个click事件
//f1没有()括号，是函数的名字对click进行赋值(而非函数运行返回的信息复制)
hh.addEventListener('click', f1);
hh.addEventListener('click', f2);
hh.addEventListener('click', f3);

//取消事件操作，要求：
//① 有名函数处理
//② 参数个数与绑定完全一致
hh.removeEventListener('click', f2);
hh.removeEventListener('click', f3);
</script>

<script type="text/javascript">
// 事件流的操作
var sp = document.getElementsByTagName('span')[0];
var pt = document.getElementsByTagName('p')[0];
var dv = document.getElementsByTagName('div')[0];
//sp.onclick = function(){}
//addEventListener(类型，处理，事件流true捕捉/false冒泡);
//为了阻止比较有意义，只考虑冒泡型即可。
sp.addEventListener('click', function (evt) {
console.log('this is span tag');
evt.stopPropagation(); //阻止事件流产生
},false);
pt.addEventListener('click', function (evt) {
console.log('this is p tag');
evt.stopPropagation();
},false);
dv.addEventListener('click', function (evt) {
console.log('this is dv tag');
evt.stopPropagation();
},false);
</script>

hh.onclick = function(evt){}

<script type="text/javascript">     var hh = document.getElementsByTagName('h2')[0];    //主流浏览器(包括IE9以上)，事件对象就是事件处理函数的第一个形参     hh.onclick = function(evt){
alert(evt);     }
</script>

evt.clientXevt      clientY //获得鼠标相对DOM区域坐标
evt.pageX           evt.pageY //获得鼠标相对DOM区域坐标(给考虑滚动条距离)
evt.screenX         evt.screenY //获得鼠标相对屏幕的坐标

③ 感知被触发键子信息:`evt.keyCode`