HTML 学习笔记 May 13，2017 js事件驱动机制、js事件分类、js访问css技术、js事件驱动机制深入理解、js常用事件、js版计算器、dom编程开山篇、dom编程实例（乌龟抓鸡）、

</script>
</body>

js 中
document.onmousedown = function(){alert('0');} // 加入这句的话,点击鼠标就能响应事件

js 操作外部 css
<script language="javascript">
function test1(eventObj) {
// 怎么知道点击的是哪个 button
window.alert(eventObj.value); // 打印出是按的哪个按钮的 value 值
var div1 = document.getElementById('div1');

        if (eventObj.value == "黑色") {            // 获取 div1            div1.style.backgroundColor = "black";        } else if (eventObj.value == "红色") {            div1.style.backgroundColor = "red";        }    }</script><title>Test</title>

</head>
<body>
<div id="div1" style="width: 400px; height: 300px; background-color: gray;">div1</div>
<input type="button" value="黑色" onclick="test1(this)"/>
<input type="button" value="红色" onclick="test1(this)"/>

</body>

直接获取到 css 里边所有的 class 选择器，方法会根据浏览器的不同而略有不同。
function test2(eventObj) {
// 获取 css 文件中的所有 class 选择器
var ocssRules = document.styleSheets[0].rules;

}

到底使用的是哪个浏览器呢，下边是判断几种常见的浏览器

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7,IE8 Mozilla就是火狐(其实是网景公布开源内核)
if (!window.ActiveXObject) { // Mozilla, Safari,
alert('Mozilla,Safari');
} else {
alert('IE');
}
} else {
alert('IE6');
}

不让用户点击右键，以防拷贝网页内容
<body oncontextmenu="return false" ...>
可以写成下面的
<body oncontextmenu="return test5()" ...> // 响应 test5 的方法
<body oncontextmenu="return test5()" onselectstart="return test6()" onload="test4" onunload="" onbeforeunload="">

js 更重要的作用是可以让用户对网页元素进行交互操作，这才是学习 js 的精华之所在。

// 响应用户点击按钮,或者是按下键盘
function move(obj) {

// 得到乌龟图片的高度和宽度var wugui_height = 67;var wugui_width = 94;// 公鸡的图片的高度和宽度var cock_height = 73;var cock_width = 76;// 得到乌龟所在的 div 对象[这里就提现了 dom 特色]var wugui = document.getElementById("wugui");// window.event 可以判断用户是通过点击按钮,还是通过键盘来控制乌龟if (window.event) {    // 获得用户按下键的 code    key = obj.keyCode;}// 得到该乌龟当前的 top 和 leftvar wugui_top = wugui.style.top;// 处理 px 后缀var wugui_left = wugui.style.left;// 下面两句话是把获取的 "100px" --> 100wugui_top = parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));wugui_left = parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));// window.alert(wugui_top);// 判断用户点击哪个按钮if (obj.value = "向下走" || key == 83) {    wugui.style.top = (wugui_top + 10) + "px";    wugui_top = wugui_top + 10;} else if (obj.value == "向右走" || key == 68) {    wugui.style.left = (wugui_left + 10) + "px";    wugui_left = wugui_left + 10;} else if (obj.value == "向左走" || key == 65) {    wugui.style.left = (wugui_left - 10) + "px";    wugui_left = wugui_left - 10;} else if (obj.value == "向上走" || key == 87) {    wugui.style.top = (wugui_top - 10) + "px";    wugui_top = wugui_top - 10;}// 判断乌龟是否碰到鸡// 得到公鸡的 left 和 topvar cock = document.getElementById("cock");// 得到该公鸡当前的 top 和 leftvar cock_top = cock.style.top;// 处理 px 后缀var cock_left = cock.style.left;cock_top = parseInt(cock_top.substring(0,cock_top.indexOf("p")));cock_left = parseInt(cock_left.substring(0,cock_left.indexOf("p")));y = Math.abs(cock_top - wugui_top); // 两点间纵坐标的绝对值x = Math.abs(cock_left - wugui_left); // 两点间横坐标的绝对值// 方法一// 判断条件xx = 0;yy = 0;// 判断纵向if (wugui_top < cock_top) {    if (y < wugui_height) {        yy = 1;    }} else {    if (y < cock_height) {        yy = 1;    }}// 判断横向if (wugui_left < cock_left) {    if (x < wugui_width) {        xx = 1;    }} else {    if (x < cock_width) {        xx = 1;    }}if (xx == 1 && yy == 1) {    window.alert("乌龟好猛啊,顶！d=====(￣▽￣*)b");    wugui.style.top = 120 + "px";    wugui.style.left = 100 + "px";}// 方法二// 从上面来的if (wugui_top < cock_top){    // 左    if (wugui_left < cock_left)    {       if (y < wugui_height && x < wugui_width)       {           window.alert("乌龟好猛啊,顶！d=====(￣▽￣*)b");           wugui.style.top = 120 + "px";           wugui.style.left = 100 + "px";       }    }    // 右    else if (y < wugui_height && x < cock_width)    {        window.alert("乌龟好猛啊,顶！d=====(￣▽￣*)b");        wugui.style.top = 120 + "px";        wugui.style.left = 100 + "px";    }}// 从下面来的else

文章转载于:https://www.jianshu.com/p/501398f08ee2

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《HTML 学习笔记 May 13，2017 js事件驱动机制、js事件分类、js访问css技术、js事件驱动机制深入理解、js常用事件、js版计算器、dom编程开山篇、dom编程实例（乌龟抓鸡）、》