js超链接调用函数和事件阻断-event对象使用-BOM浏览器对象模型

js超链接调用函数和事件阻断

1. js超链接调用函数
   1.事件调用函数
   2.使用超链接的href属性调用函数
   1)href="javascript:函数名()<a href="javascript:testA()">百度</a><br/>
   2)href=“跳转的URL” οnclick=“函数名()”
   <a href="http://www.baidu.com" onclick="testA()" >度娘</a>
   在使用超链接时候 不仅可以执行js的函数 同时可以执行指定资源的跳转
2. 事件阻断
   需要将函数中的返回值false/true 传递给window.event.returnValue = false(阻断)/true(继续)

<a href="http://www.baidu.com"  onclick="testA()" >度娘</a>

function testA(){
				alert("百度");
				window.event.returnValue = false;
				return true;
			}

js的event对象使用

浏览器的差异问题
同一段前端代码在不同的浏览器上执行会显示不同的效果
解决办法
1.代码写多套
2.JQuery兼容了各个版本浏览器 是js的类库
event对象
获取event对象
var eve = eve || window.event;
获取鼠标坐标
火狐:
eve.pageX
eve.pageY
IE
eve.x
eve.y
获取键盘值
eve.keyCode

		<script type="text/javascript">
			function getMouseCode(eve){
				var eve = eve || window.event;
				var x = eve.pageX || eve.x;
				var y = eve.pageY || eve.y;
				alert(x+":"+y)
			}
			function getKeyCode(eve){
				var eve = eve || window.event;
				var code = eve.keyCode;  //获取键盘码表值
				alert(code);
			}
		</script>

		<div id="" onmousemove="getMouseCode(event)">
		</div>
		<input type="text" onkeydown="getKeyCode(event)"/>

BOM浏览器对象模型

window对象

1. 框体函数
   警告框alert()
   确认框confirm(“确认提示语”) 点击确定返回true 点击取消返回false
   提示框prompt(“提示语”,“示例语”) 如果已经填写内容 点击确定获取内容值 如果没有填写 返回空
2. 定时执行:setTimeout(函数,时间) 指定时间后执行指定的函数 仅执行一次
3. 间隔执行:setInterval(函数,时间) 每间隔指定的时间后执行指定的函数 执行多次

function testTimeOut(){
				id = window.setTimeout(function a(){
					alert("我是定时执行的")
				},2000)
			}
			
			function testInterval(){
				num = window.setInterval(function a(){
					alert("我是间隔执行的")
				},2000)
			}
			
			function testClearTimeOut(){
				window.clearTimeout(id);
				alert("关闭定时")
			}
			
			function testClearInterval(){
				window.clearInterval(num)
				alert("关闭间隔")
			}

4. window对象之open
   打开子页面
   open(“资源路径”,“子页面名”,“子页面配置”)
   close()关闭子页面 必须于open函数结合使用
   opener属性 子页面调用父页面的函数
   在子页面调用 在父页面执行 主要用于实现子父页面的资源统一的处理

function testOpen1(){
				window.open("http://www.baidu.com","new","height=300px,width=500px,top=100,left=100,toolbar=yes,status=no,menubar=no,location=yes")
			}