事件详解
- 事件流
- 事件流:描述的是在页面中接收事件的顺序
- 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的结点(文档)
- 事件捕获:最不具体的结点先接收事件,而最具体的结点应该是最后接收事件
- 事件处理:1.HTML事件处理:直接添加到HTML结构中
<body>
<div id="div">
<button onclick="demo(this)">按钮</button>
</div>
<script>
function demo() {
alert("hello HTML事件处理");
}
</script>
</body>
2.DOM0级事件处理:把一个函数赋值给一个事件处理程序属性
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
alert("hello DOM0级事件处理程序")
};
</script>
</body>
3.DOM2级事件处理
element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型 (如 "click" 或 "mousedown").
- 第二个参数是事件触发后调用的函数。
- 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
例子:
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1 = document.getElementById("btn1").addEventListener("click",function () {
alert("hello DOM2级事件处理程序")
});
</script>
</body>
4.IE事件处理程序(attachEvent\detachEvent)
- 事件对象
- 事件对象:在触发DOM事件时都会产生一个对象
- 事件对象event:
2.1. type:获取事件类型
2.2. target:获取事件目标
2.3. stopPropagation():阻止事件冒泡
2.4. preventDefault():阻止事件默认行为
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<a href="http://www.baidu.com" id="aid">百度</a>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event) {
//alert(event.type);
alert(event.target);
event.stopPropagation(); //阻止事件的冒泡
}
function showDiv() {
alert("div");
}
function showA(event) {
event.stopPropagation();
event.preventDefault(); //阻止默认事件
}
</script>
</body>
什么是对象
- 什么是对象:JS中所有的事物都是对象:字符串、数值、函数等
(每个对象都带有属性和方法) - 自定义对象:
- 定义并创建对象实例
- 使用函数来定义对象,然后创建新的对象
实例
<body>
<!-- 创建对象 -->
<script>
// people = new Object();
// people.name = "alicelmx";
// people.age = "22";
// document.write("name: "+people.name+" , age: "+people.age);
// people = {name:"alicelmx",age:"22"};
// document.write("name: "+people.name+" , age: "+people.age);
function people(name,age) {
this.name = name;
this.age = age;
}
son = new people ("alicelmx",30);
document.write("name: "+son.name+", age: "+son.age);
</script>
</body>
String字符串对象
- String对象:用于处理已有的字符串,其中字符串可以使用单引号或者双引号
- 在字符串中查找字符串:indexOf()
<script>
var str = "hello world";
document.write(str.length);
document.write((str.indexOf("oo")));
</script>
- 内容匹配:match()
- 替换内容:replace()
- 字符串大小写转换:toUpperCase()/toLowerCase()
- 把字符串分割为子字符串数组: split()
Date日期对象
- Date对象:用于处理日期和时间。
- 获得当日的日期
- 常用方法:
- getFullYear() 获取年份。
- getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- setFullYear() 设置具体的日期。
- toUTCString() 将当日的日期(根据 UTC)转换为字符串。
- getDay() 和数组来显示星期,而不仅仅是数字。
- Display a clock 在网页上显示一个钟表。
<script>
var date = new Date();
document.write(date);
document.write(date.getFullYear());
document.write(date.getTime());
</script>
Array数组对象
- 数组的创建
var myArray = ["hello","lmx","ime"];
- 数组的访问:通过指定数组名及索引号码,你可以访问某个特定的元素
- 数组常用的方法:
- concat:合并数组
- sort:排序
- push:末尾追加元素
- reverse:数组元素翻转
Math对象
- 用于执行常见的算数任务
- 常用方法:
- round:四舍五入
- random:返回0~1之间的随机数
- max:返回最高值
- min:返回最低值
- abs:返回绝对值
DOM对象控制HTML
- 方法
- getELementByName ——获取名字
- getELementByTagName ——获取元素
等等
<body>
<a id="aid" title="得到了a标签的属性">hello</a>
<script>
function getAttr() {
var anode = document.getElementById("aid");
var attr = anode.getAttribute("title");
alert(attr);
}
getAttr();
</script>
</body>
window对象
window对象
- 是BOM的核心,window对象指当前的浏览器窗口。
- 所有JS全局对象、函数以及变量均自动成为window对象的成员。
- 全局变量是window对象的属性,全局函数是window对象的方法
- 甚至HTML DOM的document也是window对象的属性之一
window尺寸
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
1. window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
2. window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
document.write("宽度:"+innerWidth+" 高度:"+innerHeight);
对于 Internet Explorer 8、7、6、5:
1. document.documentElement.clientHeight
2. document.documentElement.clientWidth
或者
3. document.body.clientHeight
4. document.body.clientWidth
- window方法
- window.open()——打开窗口
- window.close()——关闭当前窗口
<body>
<button id="btn" onclick="btnClicked()">按钮</button>
<script>
function btnClicked() {
window.open("framea.html")
}
</script>
</body>
计时器
- 计时事件:通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
- 计时方法
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
以下代码实现:点击按钮停止自动执行
<body>
<button id="btn" onclick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
var mytime = setInterval(function(){
getTime();
},1000);
function getTime() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("ptime").innerHTML = t;
}
function stopTime() {
clearInterval(mytime);
}
</script>
</body>
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
以下代码实现:三秒弹出一个hello对话框,当点击按钮时停止执行
<body onload="myWin()">
<button id="btn" onclick="stopWin()">按钮</button>
<p id="ptime"></p>
<script>
var win;
function myWin() {
alert("hello");
win = setTimeout(function () {
myWin();
},3000)
}
function stopWin() {
clearTimeout(win);
}
</script>
</body>
location对象
- location对象:对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面
- 属性:
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
- Location Href
location.href 属性返回当前页面的 URL。
<body>
<button id="btn" onclick="getLoc()">按钮</button>
<p id="ptime"></p>
<script>
function getLoc() {
document.getElementById("ptime").innerHTML = window.location.href;
}
</script>
</body>
- Location Assign
location.assign() 方法加载新的文档。
<html>
<head>
<script>
function newDoc(){
window.location.assign("http://www.w3cschool.cc")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
Screen对象
- 对象:window.screen对象包含有关用户屏幕的信息
- 属性:
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
认识面向对象
面向对象的概念:
1. 一切事物皆对象
2. 对象具有封装和继承特性
3. 信息隐藏
基本面向对象
var person = {
name:"lmx",
age:22,
eat:function () {
alert("能吃")
}
}
函数构造器构造对象
function Person() {
}
Person.prototype={
name:"lmx",
age:22,
eat:function () {
alert("能吃")
}
}
var p =new Person();
alert(p.age);
深入JS面向对象
// 封装
(function () {
var n = ime;
People(name){
this._name = name;
}
//指定原型量
People.prototype.say = function () {
alert("peo-我能说"+this._name+n);
};
window.people = People;
}());
(function () {
function Student(name) {
this._name = name;
}
Student.prototype = new People();//实现继承
var superSay = Student.prototype.say;
Student.prototype.say = function () {
superSay.call(this);
alert("stu-我能说"+this._name);
}
window.Student = Student;
}());
var s = new Student("lmx");
s.say();