Framework7是一套用于构建移动端混合应用的框架，在实际开发中我们常需要将写好的HTML页面与独立的JavaScript文件建立联系，并在页面上处理点击、输入等用户事件。理解它的加载机制和事件生命周期，是写出稳定代码的前提。
HTML页面如何引入JavaScript文件
在Framework7项目中，入口页面通常是index.html。我们可以像普通网页一样使用script标签引入JS文件，但要注意Framework7多采用单页应用模式，路由切换时不会重新刷新整个页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="framework7.min.css">
</head>
<body>
<div id="app">
<div class="view view-main"></div>
</div>
<script src="framework7.min.js"></script>
<script src="my-app.js"></script>
</body>
</html>
上面的my-app.js就是我们自己写的逻辑文件，里面可以初始化Framework7实例并定义事件处理方式。
在JavaScript中初始化并处理事件
Framework7提供了页面事件，比如page:init，当某个路由页面加载完成会触发它。我们应该把事件绑定写在这里，而不是放在全局直接执行，否则在页面重复进入时可能重复绑定。
// my-app.js
var app = new Framework7({
el: '#app',
routes: [
{
path: '/about/',
url: 'pages/about.html'
}
]
});
// 使用页面初始化事件绑定按钮点击
app.on('page:init', function (e, page) {
if (page.name === 'about') {
var btn = page.el.querySelector('.my-button');
if (btn) {
btn.addEventListener('click', function () {
app.dialog.alert('你点击了按钮');
});
}
}
});
避免重复绑定事件
由于单页应用中页面可能被多次初始化，直接写document.querySelector再绑定会造成多个监听器。通过page.name判断并在page容器page.el内查找元素，可以有效限定作用域。
在HTML页面中写内联调用
有时我们会在HTML里写onclick，但Framework7不推荐这样混用。更好的做法是用class或id标记元素，在JS里统一绑定，保持结构与行为分离。
<!-- pages/about.html -->
<div class="page" data-name="about">
<div class="page-content">
<button class="my-button">点我</button>
</div>
</div>
小结
在Framework7里，HTML页面通过路由url加载，JavaScript文件在入口处引入；事件处理应当依托page:init等框架事件，在对应页面作用域内绑定。这样既能保证脚本正确链接，也能让交互逻辑清晰可控。
Framework7HTML页面JavaScript事件修改时间：2026-07-30 21:48:18