基本鼠标事件
鼠标悬浮停留事件
onmouseover
onmouseenter他们大题没有什么区别,唯一的区别就是:mouseenter不支持冒泡,而mouseover支持冒泡。
而事件冒泡指的是事件冒泡,即在子元素上触发的事件会向上传递至父级元素,并触发绑定在父级元素上的相应事件。
鼠标离开事件
onmouseout
onmouseleave区别同上
鼠标点击回弹事件
onmouseup
其实就是鼠标点击某个元素,然后点击完鼠标自动弹起触发的事件
鼠标点击事件
onclick
onmousedown简单的说onclick = onmousedown + onmouseup;
如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标会触发onmousedown事件,但是onclick事件却不会被触发。鼠标移动事件
onmousemove
就是鼠标在某个元素里面移动触发的事件
ommousedown和onmousemove都会产生一个鼠标的坐标值
ev.clientX 与 ev.clientY两个值,这两个值代表着鼠标在可视页面的距离X/Y的值(这里涉及到一个兼容问题,我会在后面讲到关于兼容)
获取HTML标签的方法
document.getElementById('');
这是获取拥有ID属性的HTML标签
document.getElementsByTagName('');
这是获取同一种HTML标签,里面填入的是标签的名字。它获取的元素为一组,所以用来装它的一定是数组
document.getElementsByClassName('');
这是获取类名为一样HTML标签,里面填入的是类名。它获取的元素为一组,所以用来装它的一定是数组
document.querySelector('');
这是获取一个HTML标签,里面填入的是可以是标签的名字也可以是类名甚至是ID名。如果是标签名那么直接填入。类名的话,在它前面写一个英文状态下的句号。假如是ID,那么直接在他前面添加 ' # '。它获取的元素为一组,所以用来装它的一定是数组
document.querySelectorAll('');
这是获取同一组HTML标签,获取方式同上。它获取的元素为一组,所以用来装它的一定是数组
前三组和后两组的区别
后两组选出来的元素及元素数组是静态的,而前三组这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变。
在使用的时候前三组这种方法性能比较好,后两组则比较方便。
函数
function a(xxx,xxxx){
xxxx;
xxxxx;
xxxx;
}
function 是每写一个函数都要写的,就像提名一样。
a 是函数的名字,这个是你自己取的,当然有的函数则不需要函数名因为他是直接赋值给前面的。
a.onclick = function(){
xxxxx;
xxxxxx
}
例如上面的就直接赋予前面的a的点击事件,就可以省略给函数取名这一步
() 则是你需要传递进去的参数
{} 里面是你这个函数具体要实现什么样的操作,记住写完一句之后记得用 ;结尾,最后一句则可以省略。